<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="../css/common.css"/>
<link rel="stylesheet" type="text/css" href="../font/iconfont.css"/>
<style type="text/css">
.hide{
	display: none;
}
	.yuyue-line{
		background: #fff;
		margin: 0.2rem 0 0 0;
		padding:0.5rem;
		position: relative;
		box-shadow:0 0 1px #ddd;
	}
	.yuyue-icon{
		display: block;
		width:3rem;
		height:3rem;
		background:#6CC142;
		border-radius: 3rem;
		overflow: hidden;
		text-align: center;
		font-size: 1.5rem;
		line-height:3rem;
		color: #fff;
	}
	.yuyue-icon.col2{
		background-color: #42BDE7;
	}
	.yuyue-icon.col3{
		background-color:#FE555A;
	}
	.yuyue-content{
		flex: 1;
		-webkit-flex: 1;
		padding-left:1rem;
	}
	.yuyue-title{
		width: auto;
		height: auto;
		padding-top: 0.2rem;
	}
	.yuyue-dizhi{
		font-size:14px;
		color: #999;
		padding-top: 0.2rem;
	}
	.icon-i6{
		line-height:3rem;
		color: dodgerblue;
	}
	.clolor2{
		color: dodgerblue;
	}
	.yuyue-gongwei{
		padding: 0.2rem;
		justify-content:space-between;
		flex-wrap:wrap;
		padding-top: 0;
	}
	.gongwei{
		display: block;
		width: 32.7%;
		height: 3.5rem;
		text-align: center; 
		line-height: 1.2rem;
		margin-bottom: 0.2rem;
		/*border-radius: 0.2rem;*/
		color:dodgerblue;
		border: 1px solid #eee;
		position: relative;
		padding: 0.5rem 0 0 0; 
	}
	.gongwei-check{
		display:none;
		height:20px;
		width: 20px;
		right:0;
		bottom:0;
		position: absolute;
		font-size: 14px;
		background: url(../img/check.png) no-repeat;
		background-size: 20px 20px;
	}
	.gongwei.active .gongwei-check{
		display: block;
	}
	.gongwei.active{
		background:dodgerblue;
		border: 1px solid dodgerblue;
		color: #fff;
	}
	.gongwei.active .counts{
		color: #eee;
	}
	.gongwei.nosource{
		background: #fff;
		color: #ccc;
	}
	.jcontent{
		padding-bottom: 6rem;
	}
	.counts{
		display: block;
		font-size:12px;
		color: #999;
	}
	.yuyuebtn{
		position: fixed;
		width: 100%;
		height: 3.5rem;
		background:#f5f5f5;
		bottom: 0;
		left: 0;
		box-shadow:0 0 1px #ccc;
		-webkit-box-shadow:0 0 1px #ccc;
		font-size:14px;
	}
	.yuyuebtnsubm{
		display: block;
		height: 100%;
		width:90px;
		background:orangered;
		text-align: center;
		line-height:3.5rem;
		color: #fff;
	}
	.yuyuebtninfo{
		width: auto;
		flex: 1;
		-webkit-flex: 1;
		padding: 0.1rem 0 0.1rem 1rem;
		color: #555;
		font-size:14px;
	}
	/*.yytimes{
		padding: 0.5rem 0 0 0;
		font-weight: bold;
		color: orangered;
		width: 2rem;
		background-color: red;
	}*/
	.remarks{
		display: block;
		background-color: #F5F5F5;
		margin-right: 0.5rem;
		border:0;
		height: 3.5rem;
		width: 10rem;
	}
	.selectDateBox{
		width: auto;
		flex: 1;
		-webkit-flex: 1;
		padding: 0.5rem 0 0.5rem 1rem;
		color: #555;
		font-size:14px;
	}
	.selectDate{
		padding: 0 0 0.6rem 0;
		font-weight: bold;
		color: orangered;
	}
	/*.yytimes-label{
		color: #999;
	}*/
	#checkdate{
		display: block;
		width: 100%;
		border: 0;
		background: transparent;
		appearance:none;
		-webkit-appearance:none;
		margin-left: -3px;
		direction: ltr;
	}
	#checkdate option{
		direction: ltr;
	}
	#checkdate:focus{
		outline:none;
	}
	.animated {
	  -webkit-animation-duration: 1s;
	  animation-duration: 1s;
	  -webkit-animation-fill-mode: both;
	  animation-fill-mode: both;
	}
		
	@-webkit-keyframes fadeInUpBig {
		  from {
		    opacity: 0;
		    -webkit-transform: translate3d(0, 100px, 0);
		    transform: translate3d(0, 100px, 0);
		  }
		
		  to {
		    opacity: 1;
		    -webkit-transform: none;
		    transform: none;
		  }
	}
	
	@keyframes fadeInUpBig {
	  from {
	    opacity: 0;
	    -webkit-transform: translate3d(0, 100px, 0);
	    transform: translate3d(0, 100px, 0);
	  }
	
	  to {
	    opacity: 1;
	    -webkit-transform: none;
	    transform: none;
	  }
	}

	.fadeInUpBig {
	  -webkit-animation-name: fadeInUpBig;
	  animation-name: fadeInUpBig;
	}
	
	@-webkit-keyframes fadeOutDownBig {
	  from {
	    opacity: 1;
	  }
	
	  to {
	    opacity: 0;
	    -webkit-transform: translate3d(0, 100px, 0);
	    transform: translate3d(0, 100px, 0);
	  }
	}
	
	@keyframes fadeOutDownBig {
	  from {
	    opacity: 1;
	  }
	
	  to {
	    opacity: 0;
	    -webkit-transform: translate3d(0, 100px, 0);
	    transform: translate3d(0, 100px, 0);
	  }
	}
	
	.fadeOutDownBig {
	  -webkit-animation-name: fadeOutDownBig;
	  animation-name: fadeOutDownBig;
	}
	
	.flexdisplay.hide{
		display: none;
	}
	#xxtitle{
		width: auto;
		height: 2rem;
		text-align: center;
		line-height: 2rem;
		font-size: 14px;
		margin:10px 0 10px 0;
		font-weight: bold;
	}
	#gongweitab{
		width: auto;
		height: 3rem;
		background: #fff;
		padding: 0 0 0 1rem;
		line-height: 3rem;
		margin-bottom:5px;
	}
	.gongweitab-item.active{
		border-bottom: 2px solid orangered;
		color: orangered;
	}
	.gongweitab-item{
		display: block;
		width:6rem;
		text-align: center;
		color: #999;
	}
	.atitle{
		height: 10px;
	}
	.yybox{
		width: auto;
		height: auto;
		background: #fff;
		padding: 10px;
		padding-bottom:2px;
		box-shadow:0 0 1px #ccc;
		-webkit-box-shadow:0 0 1px #ccc;
	}
	.yyboxitem{
		width:3.5rem;
		height: auto;
	}
	.yyboxtimes{
		flex: 1;
		-webkit-flex: 1;
	}
	.sxwitem{
		width: 3rem;
		height: 3rem;
		background:yellowgreen;
		border-radius: 3rem;
		text-align: center;
		line-height: 3rem;
		color: #fff;
		font-size: 14px;
	}
	.noplantip{
		height: 5rem;
		color: red;
		line-height: 5rem;
		font-size:14px;
	}
</style>
</head>
<body>
<div class="jcontent">
	<div class="yuyue-line jflex">
		<a class="yuyue-icon">
			<i class="iconfont icon-4sbaoyang"></i>
		</a>
		<div class="yuyue-content">
			<div id="s1" class="yuyue-title">--</div>
			<div id="s2" class="yuyue-dizhi">--</div>
		</div>
	</div>
	
	<div id="mycar" class="yuyue-line jflex">
		<a class="yuyue-icon col2"><i class="iconfont icon-cl2"></i></a>
		<div class="yuyue-content">
			<div id="s3" class="yuyue-title"></div>
			<div class="yuyue-dizhi">
				<span id="s4">--</span>
				&nbsp;&nbsp;|&nbsp;&nbsp;
				<span id="s5">--</span>购买
			</div>
		</div>
		<div class="yuyue-iantou"><i class="iconfont icon-i6"></i></div>
	</div>
	
	<div class="yuyue-line jflex">
		<a class="yuyue-icon col3"><i class="iconfont icon-csrq"></i></a>
		<div class="yuyue-content">
			<div class="yuyue-title clolor2">
				<select id="checkdate" name="checkdate"></select>
			</div>
			<div class="yuyue-dizhi">点击更改日期</div>
		</div>
		<div class="yuyue-iantou"><i class="iconfont icon-i6"></i></div>
	</div>
	<div class="atitle"></div>
	
	<div class="selectDateBox">
		<div class="selectDate">
			<span id="bott-1">请选择需要预约的时间段</span>
		</div>
	</div>
	
	<div class="yybox jflex vcenter">
		<div class="yyboxitem">
			<div class="sxwitem">上午</div>
		</div>
		<div class="yyboxtimes">
			<div id="gongwei-sw" class="yuyue-gongwei jflex"></div>
		</div>
	</div>
	<div class="atitle"></div>
	<div class="yybox jflex vcenter">
		<div class="yyboxitem">
			<div class="sxwitem">下午</div>
		</div>
		<div class="yyboxtimes">
			<div id="gongwei-xw" class="yuyue-gongwei jflex"></div>
		</div>
	</div>
	
</div>

<div id="yuyuebtn" class="yuyuebtn jflex">
	<div class="yuyuebtninfo">
		<div class="yytimes">
			<input type="text" placeholder="请输入备注信息" class="remarks" id="remarks" />
		</div>
	</div>
	<a class="yuyuebtnsubm taped taped-1">确认预约</a>
</div>

<script src="../js/mui.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/common.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/template.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">

mui.plusReady(function(){
	window.setTimeout(function(){
		loadDates();
	},360);
});

/**
 * 
 * 选择日期，加载该日期对应的工位信息
 * 
 */
mui('.jcontent').on('change', '#checkdate', function(e) {
	getTiemData();
	document.getElementById("bott-1").innerHTML="请选择需要预约的时间段";
});

/**
 * 
 * 重新选择车辆
 * 
 */
mui('.jcontent').on('tap', '#mycar', function(e) {
	plus.webview.getTopWebview().hide("auto");
});

/**
 * 确认预约 
 */
mui('#yuyuebtn').on('tap', '.taped-1', function(e) {
	//隐藏输入法
	webapp.hideTypewriting(["remarks"]);
	if(!document.querySelector(".gongwei.active") == null){
		webapp.showWaiting();
		var gongweiId=document.querySelector(".gongwei.active").getAttribute("data-id");
		if(document.querySelector(".gongwei.active").length == 1){
			webapp.ajax({
				url: "/carLife/admin/interface/order/saveOrderMessage",
				data: {
					sellerId:webapp.GetQueryString("sellerId"),
					carMessageId:webapp.GetQueryString("carMessageId"),
					timeMessageId:gongweiId,
					remarks:document.getElementById("remarks").value
				},
				success: function(json) {
					if(json.code == '200') {
						mui.toast("您已经预约成功！");
					} else {
						mui.toast(json.msg);
					}
					webapp.closeWaiting();
				}
			});
		}
	}else{
		mui.toast("请选择工位！");
	}
});


mui('.yuyue-gongwei').on('tap', '.gongwei', function(e) {
	if(this.classList.contains("nosource")){
		return false;
	}
	//取消当前已经选中的选项
	var _activeGongwei=document.querySelector(".gongwei.active");
	if(_activeGongwei!=null){
		_activeGongwei.classList.remove("active");
	}
	//取消当前已经选中的选项end
	//把当前按钮设置为选中
	this.classList.add("active");
	//更改底部菜单的显示数据
	var _dateSelect=document.getElementById("checkdate");
	var dates=_dateSelect[_dateSelect.options.selectedIndex].text;
	var times=this.getAttribute("data-txt");
	document.getElementById("bott-1").innerHTML="您的预约时间为:&nbsp;"+dates+times+"  保养";
	//更改底部菜单的显示数据end
});


/**
 * 加载顶部的预约时间
 */
function loadDates(){
	document.getElementById("s1").innerHTML=webapp.GetQueryString("sellerName");
	document.getElementById("s2").innerHTML=webapp.GetQueryString("adress");
	document.getElementById("s3").innerHTML=webapp.GetQueryString("chepai");
	document.getElementById("s4").innerHTML=webapp.GetQueryString("pinpai");
	document.getElementById("s5").innerHTML=webapp.GetQueryString("goumairiqi");
	//获取4s店iD
	var sellerId= webapp.GetQueryString("sellerId");
	webapp.ajax({
		url: "/carLife/admin/interface/order/selectOrderDateMessage?sellerId="+sellerId,
		success: function(json) {
			if(json.code == '200') {
				var html = template('date-tpl', json);
				document.getElementById("checkdate").innerHTML=html;
				//加载第一条的工位信息
				getTiemData();
			} else {
				mui.toast(json.msg);
			}
		}
	});
}
/**
 * 
 * 获取当前选中日期的工位信息
 * 
 */
function getTiemData(){
	var _sellerId=webapp.GetQueryString("sellerId");
	var _nowDate=document.getElementById("checkdate").value;
	webapp.showWaiting();
	//发起请求 获取数据
	webapp.ajax({
		url: "/carLife/admin/interface/order/selectOrderTimeMessage",
		data: {
			sellerId: _sellerId,
			nowDate: _nowDate
		},
		success: function(json) {
			webapp.closeWaiting();
			//加载上午
			var swhtml=template("gongwei-tpl",{
				data:json.data.morning
			});
			document.getElementById("gongwei-sw").innerHTML=swhtml;
			//加载下午
			var xwhtml=template("gongwei-tpl",{
				data:json.data.afternoon
			});
			document.getElementById("gongwei-xw").innerHTML=xwhtml;
			//清除内容
			swhtml=null;
			xwhtml=null;
		}
	});
}
</script>
<!--以下为模板-->
<script id="date-tpl" type="text/html">
{{each data as item i}}
<option value="{{item.year}}-{{item.month}}-{{item.day}}">{{item.year}}年{{item.month}}月{{item.day}}日（{{item.week}}）</option>
{{/each}}
</script>

<script id="gongwei-tpl" type="text/html">
{{each data as item i}}
<a class="gongwei {{if item.state==0}}nosource{{/if}}" data-id={{item.id}} data-txt="{{item.orderTime}}">
	<div>
	{{item.orderTime}}
	<span class="counts">{{if item.state==0}}已约完{{else}}剩余{{item.maxNum - item.nowNum}}工位{{/if}}</span>
	</div>
	<div class="gongwei-check"></div>
</a>
{{/each}}
{{if (3 - data.length % 3)==1}}
<a class="gongwei nosource"></a>
{{/if}}
{{if data.length==0}}
<div class="noplantip">
	无可预约工位
</div>
{{/if}}
</script>

</body>
</html>
